<template>
<div id="Warp" class="Warp large fix-top ">
    <Layout>
        <Header id="PageHeader" class="PageHeader">
            <div class="container">
                <div class="layout-logo"></div>
                <Icon v-show="isCollapsedShow" @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0px 20px 0'}" type="ios-menu" size="24"></Icon>
                <NavMenu class="layout-nav" mode='horizontal' type='1' parent-id='0' :current="CurModule.Top" :theme="theme.top" @on-select="onSelectTopMenu"></NavMenu>
                <div class="layout-right">
                    <Dropdown @on-click="onClicUserInfoBtn" trigger="click">
                        <a href="javascript:void(0)">
                           <Icon type="ios-person" size="24"></Icon> {{userInfo.UserRealName}}
                            <Icon type="arrow-down-b"></Icon>
                        </a>
                        <Dropdown-menu slot="list">
                            <Dropdown-item name="userInfo">个人信息</Dropdown-item>
                            <Dropdown-item name="signOut">注销退出</Dropdown-item>
                        </Dropdown-menu>
                    </Dropdown>
                </div>
            </div>

        </Header>
        <Layout id="PageContent" class="PageContent">
            <Sider :width="theme.leftWidth" id="PageLeft" class="left" ref="side1" hide-trigger isCollapsed v-show="!isCollapsed" :style="{background: leftBgColor}">
                <div class="ContentMain">
                    <NavMenu type='2' :accordion="true" :style="{width:'auto'}" :parent-id='CurModule.Top' :current="CurModule.Left" :theme="theme.left" @on-select="onSelectLeftMenu"></NavMenu>
                </div>
            </Sider>
            <Layout style="padding:0px">

                <Content id="PageMainContent" class="PageMainContent" :style="{padding: $store.state.PageMainContentPadding,'background': $store.state.pageContentBackGroudColor }">
                    <div class="Container">
                        <div id="Guide" class="Guide" v-show="CurModule.IsShowGuide">

                            <div id="GuideMenu" class="content">
                                <NavMenu mode='horizontal' type='3' :parent-id='CurModule.Left' :current="CurModule.Guide" :theme="theme.guide" @on-select="onSelectGuideMenu"></NavMenu>
                            </div>
                            <div class="right">
                                <!-- <Tooltip content="打印预览" placement="bottom">
                                    <Button size="small" type="ghost" shape="circle" icon="printer"></Button>
                                </Tooltip>

                                <Tooltip content="导出到excel" placement="bottom-end">
                                    <Button size="small" type="ghost" shape="circle" icon="ios-cloud-download-outline"></Button>
                                </Tooltip> -->

                            </div>
                        </div>

                        <div id="PageMainContent">
                            <div v-if="CurModuleID>0" class="ContentMain">

                                <router-view v-show="!$store.state.isPageLoading"></router-view>

                            </div>
                            <div v-else>
                                <div class="NoModule">
                                    <div class="code">401</div>
                                    <div class="info">
                                        <div class="content">您无权查看此页面,请联系管理员开通</div>
                                        <div class="btn-contian">
                                            <Button type="ghost" @click="back()">返回</Button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <Spin size="large" fix v-if="$store.state.isPageLoading"></Spin>

                </Content>
            </Layout>
        </Layout>
    </Layout>
    <Modal v-model="IsShowUserInfoWin" @on-ok="onClickOk" :loading="modal_loading">
        <CurUserInfo ref="CurUserInfo"></CurUserInfo>
    </Modal>
</div>
</template>

<script>
import AppFrame from "../libs/app-frame";
import NavMenu from "../components/nav-menu.vue";
import CurUserInfo from "./system/cur-user-info";
//import {userInfo} from 'os';
export default {
    components: {
        NavMenu,
        CurUserInfo
    },
    data: function() {
        return {
            userInfo: {},
            theme: {
                top: "dark",
                left: "dark",
                guide: "light",
                leftWidth: '240'
            },
            CurModule: {
                Top: 0,
                Left: -1,
                Guide: -1
            },
            isCollapsed: false,
            isCollapsedShow:true,
            modal_loading: true,
            CurModuleID: 0,
            IsShowUserInfoWin: false
        };
    },
    created: function() {
        var url = location.pathname;

        this.analysis(url);
        this.$store.state.MsgBus.$on(
            "UrlAfter",
            function(data) {

                this.analysis(data);
            }.bind(this)
        );
        this.userInfo = AppFrame.UserInfo.getUserInfo();
        console.log(this.userInfo);
    },

    computed: {

        leftBgColor() {
            var bgcolor = "";
            if (this.theme.left == "dark") {
                bgcolor = "#495060";
            } else {
                bgcolor = "#fff";
            }

            return bgcolor;
        },

        rotateIcon() {
            return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
        },
        menuitemClasses() {
            return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
        }
    },
    mounted: function() {
        var self = this;

        AppFrame.Tools.Screen.OnReSize(function(W, H, Scale) {

            var HeaderHeight = $("#PageHeader").height();
            var MainHeight = H - HeaderHeight;
            $("#PageContent").css({
                "height": MainHeight + "px"
            });
            $("#PageLeft").height(MainHeight);

            self.FixLeftContentSlimScroll();
            //self.FixPageMainContentSlimSroll();
            self.$store.state.MsgBus.$emit("PageOnReSize", {
                WinWidth: W,
                WinHeight: H,
                Scale: Scale,
                MainHeight: MainHeight
            });
        });
        self.FixLeftContentSlimScroll();

    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        collapsedSider() {
            this.isCollapsed = !this.isCollapsed;
            // this.$refs.side1.toggleCollapse();
        },
        FixLeftContentSlimScroll() {
            if ($("#PageLeft").find(".ContentMain").length == 0) return;
            var ContentHeight = $("#PageLeft").height();
            $("#PageLeft").find(".ContentMain").slimScroll({
                height: ContentHeight,
                alwaysVisible: false,
                allowPageScroll: false,
                touchScrollStep: 200,
                color: "#999",
                size: "5px",
                distance: "2px"
            });
        },


        analysis(url) {
            var Module = AppFrame.UserModule.GetModuleByUrl(url);
            //console.log(Module, this.CurModuleID, url);
            if (Module) {
                window.document.title = Module.Name;
                this.CurModuleID = Module.ModuleID;
                AppFrame.UserModule.SetCurSelectModuleID(this.CurModuleID);
               // alert( JSON.stringify(Module));
                if (!Module.IsShowLeftMenu) {
                    this.isCollapsed = true;
                    this.isCollapsedShow=false;
                    //this.collapsedSider();
                } else {
                    this.isCollapsed = false;
                    this.isCollapsedShow=true;
                    // this.collapsedSider();
                }

                var currentGuideModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(
                    Module.ModuleID,
                    3
                );
                var currentLeftModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(
                    Module.ModuleID,
                    2
                );
                var currentTopModule = AppFrame.UserModule.FindLastModuleByIsShowInMenu(
                    Module.ModuleID,
                    1
                );

                if (currentTopModule) {
                    this.CurModule.Top = currentTopModule.ModuleID;
                }
                if (currentLeftModule) {
                    this.CurModule.Left = currentLeftModule.ModuleID;
                }
                if (currentGuideModule) {
                    this.CurModule.Guide = currentGuideModule.ModuleID;
                    this.CurModule.IsShowGuide = true;
                } else {
                    this.CurModule.IsShowGuide = false;
                }

                // console.log(currentGuideModule, currentLeftModule, currentTopModule);
            } else {
               this.CurModuleID=0;
            }
        },
        onSelectTopMenu(ModuleID) {
            this.CurModule.Top = ModuleID;
        },
        onSelectLeftMenu(ModuleID) {
            this.CurModule.Left = ModuleID;
        },
        onSelectGuideMenu(ModuleID) {
            this.CurModule.Guide = ModuleID;
        },
        onClickOk() {
            let self = this;
            if (self.$refs["CurUserInfo"].CurTabName == "rePwdPlan") {
                this.$refs["CurUserInfo"].onRePwd(function(err, ret) {
                    self.modal_loading = false;
                    setTimeout(function() {
                        self.modal_loading = true;
                    }, 0);

                    if (ret && ret.Result == 1) {
                        self.$Message.success("密码修改成功");
                        self.IsShowUserInfoWin = false;
                    }
                });
            } else {
                self.IsShowUserInfoWin = false;
            }
        },

        onClicUserInfoBtn(selectName) {
            switch (selectName) {
                case "userInfo":
                    this.IsShowUserInfoWin = true;
                    break;
                case "signOut":
                let LoginUrl="/Manage/Login/System";
                    let CurUserInfo=AppFrame.UserInfo.getUserInfo();

                    if(CurUserInfo.UserPartnersSign!=''){
                        LoginUrl="/Manage/Login/"+CurUserInfo.UserPartnersSign;
                    }
                    AppFrame.UserInfo.clear();
                    location.href =LoginUrl;


                    break;
            }
        },

        test() {
            this.$store.state.a++;
        }
    }
};
</script>

<style scoped>

</style>
